<template>
  <div id="login" class="loginContainer" :style="{ backgroundImage: `url(${require('../../assets/img/background.png')})` }">
    <div class="loginHeader">
      <span>研发运维管理系统</span>
    </div>
    <div class="loginMainWrapper">
      <div class="loginWrapper">
        <div class="loginTipsWrapper" style="color: #ffffff">
          <span class="siteSummaryTitle">研发运维管理系统</span>
          <div class="siteSummary">
            <ul>
              <li><a-icon type="check-square" style="margin-right: 10px" /><span>统一方便的资源管理</span></li>
              <li><a-icon type="check-square" style="margin-right: 10px" /><span>友好的界面展示，基于AntDesign组件库</span></li>
              <li><a-icon type="check-square" style="margin-right: 10px" /><span>基于角色权限划分，更利于资源隔离</span></li>
              <li><a-icon type="check-square" style="margin-right: 10px" /><span>前后端分离，便于维护</span></li>
              <li><a-icon type="check-square" style="margin-right: 10px" /><span>前后端均支持多实例部署</span></li>
            </ul>
          </div>
        </div>
        <div class="loginBoxWrapper">
          <a-form-model ref="formInline" :model="formInline" @submit.prevent="handleSubmit" :rules="rules"
            style="width: 100%;">
            <a-form-model-item style="text-align: center; margin-bottom: 2px;">
              <h1>欢迎登录</h1>
            </a-form-model-item>
            <a-form-model-item has-feedback style="margin-bottom: 2px;" prop="username">
              <el-input v-model="formInline.username" placeholder="账号">
                <i class="el-icon-user" slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
              </el-input>
            </a-form-model-item>
            <a-form-model-item has-feedback style="margin-bottom: 2px;" prop="password">
              <el-input v-model="formInline.password" type="password" placeholder="密码">
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
              </el-input>
            </a-form-model-item>
            <a-form-model-item style="margin-bottom: 2px;">
              <div class="rememberMeWrapper">
                <a-checkbox-group v-model="formInline.resource">
                  <a-checkbox value="true" name="type">记住密码</a-checkbox>
                </a-checkbox-group>
                <a href="">忘记密码</a>
              </div>
            </a-form-model-item>
            <a-form-model-item style="margin-bottom: 2px;">
              <a-button type="primary" @click="handleSubmit('formInline')" style="width: 100%"
                class="ant-btn ant-btn-primary">立即登录</a-button>
              还没有账号?
              <a href="" class="ant-btn ant-btn-link">立即注册</a>
            </a-form-model-item>
            <a-divider>其他登录方式</a-divider>
            <a-form-model-item style="text-align: center; margin-bottom: 2px;">
              <a-space size="large">
                <a-icon type="weibo" style="font-size: 2em;cursor: pointer;color:#f50" />
                <a-icon type="qq" style="font-size: 2em;cursor: pointer;color:#2b92e4;" />
                <a-icon type="github" style="font-size: 2em;cursor: pointer;color:#333;" />
              </a-space>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
      <div class="loginFooter">
        © 2018-2021 CoreCmd 版权所有. 京ICP备18063315号-1 贵公网安备 52038202001416号
      </div>
    </div>
  </div>
</template>

<script>
import localStorageKey from '../../components/local-storage-key';
import { login } from '../../api/login/login'

export default {
  name: "Login",
  data() {
    /**
     * 验证用户名
     */
    let validateUsername = (rule, value, callback) => {
      if (value === '') {
        console.debug(`用户名不能为空`);
        callback(new Error('请输入用户名'));
      }
      callback();
    };
    /**
     * 验证密码
     */
    let validatePassword = (rule, value, callback) => {
      if (value === '') {
        console.debug(`密码不能为空`);
        callback(new Error('请输入密码'));
      }
      callback();
    };
    return {
      /**
       * form表单
       */
      formInline: {
        username: '',
        password: '',
        resource: [],
      },
      /**
       * 验证form表单
       */
      rules: {
        username: [{ validator: validateUsername, trigger: 'change' }],
        password: [{ validator: validatePassword, trigger: 'change' }],
      },
    };
  },
  methods: {
    /**
     * 登录并验证
     * @param {*} formName 
     */
    handleSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          console.debug('登录前，验证失败');
          return false;
        } else {
          console.debug(`登录前，验证成功`);

          // 登录
          login(this.formInline.username, this.formInline.password).then((res) => {
            if (res.Success == true) {
              console.debug(`用户[${this.formInline.username}]登录成功，返回值[${res}]`);
              localStorage.setItem(localStorageKey.keySet.userInfo, JSON.stringify(res));
              this.$router.push({ path: '/home' });
            } else {
              console.debug(`用户[${this.formInline.username}]登录失败，返回值[${res}]`);
              this.$message.error(`用户[${this.formInline.username}]登录失败`);
            }
          });
        }
      });
    },
  },
}
</script>

<style scoped>
.loginContainer {
  width: 100%;
  position: relative;
  /* background: url(https://img1.baidu.com/it/u=564468332,1185985646&fm=26&fmt=auto&gp=0.jpg); */
  background-attachment: fixed;
  background-repeat: no-repeat !important;
  background-size: cover;
  background-position: center;
  padding-top: 105px;
  min-height: 100%;
}

.loginHeader {
  width: 100%;
  height: 50px;
  background-color: #ffffff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 15px rgba(0, 0, 0, .2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding: 10px;
}

.loginHeader span {
  font-size: 25px;
  font-weight: 700;
}

.loginMainWrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}

.loginWrapper {
  width: 90%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  height: 100%;
}

.loginFooter {
  width: 100%;
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  text-align: center;
  color: #ffffff;
  margin-top: 15px;
  margin-bottom: 15px;
}

.siteSummary ul {
  list-style: none;
  padding: 0;
}

.siteSummary ul li {
  margin-top: 10px;
  list-style: none;
}

@media screen and (min-width: 1200px) {
  .loginTipsWrapper {
    padding: 20px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    min-height: 100%;
  }

  .loginBoxWrapper {
    background-color: #ffffff;
    padding: 20px;
    width: 400px;
    height: 100%;
    border-radius: 5px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1200px) {
  .loginTipsWrapper {
    padding: 20px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    height: 100%;
  }

  .loginBoxWrapper {
    background-color: #ffffff;
    padding: 20px;
    width: 400px;
    height: 100%;
    border-radius: 5px;
  }
}

@media screen and (max-width: 768px) {
  .loginTipsWrapper {
    display: none;
  }

  .loginBoxWrapper {
    background-color: #ffffff;
    padding: 20px;
    width: 100%;
    border-radius: 5px;
  }
}

.rememberMeWrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.siteSummaryTitle {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 700;
}

.siteSummary {
  margin-top: 25px;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 300;
}
</style>